<template>
    <h3>操作人员列表</h3>
    <el-table :data="operatorList" height="500" style="width: 100%">
        <el-table-column prop="adminid" label="管理员编号" width="180" />
        <el-table-column prop="adminname" label="管理员姓名" width="180" />
        <el-table-column prop="role" label="管理员角色" width="180">
            <template #default="scope">
                <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
            </template>
        </el-table-column>
        <!-- <el-table-column label="是否删除" width="180">
        <template #default="scope">
          <el-button type="danger" :icon="Delete" circle v-model="scope.row.bannerid" @click="del(scope.row.bannerid)" />
        </template>
      </el-table-column> -->
        <el-table-column label="是否删除" width="180">
            <template #default="scope">
                <el-popconfirm title="您真的想好要舍弃我了吗？" @confirm="del(scope.row.adminid)">
                    <template #reference>
                        <el-button type="danger" :icon="Delete" circle>
                        </el-button>
                    </template>
                </el-popconfirm>
                <el-button type="primary" :icon="Edit" circle @click=editShowFn(scope.row.adminname) />
            </template>
        </el-table-column>
    </el-table>
    <Editoperator v-show="isshow" @quxiao="chufa" :adminname="editAdminName" @gengxin="gengxinFn"></Editoperator>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { isShallow, reactive, ref } from "vue";
import service from "../../../utils/service";
import Editoperator from "./Editoperator.vue";
// import { useRouter } from "vue-router"
import {
    Delete,
    Edit
} from '@element-plus/icons-vue'
// const router = useRouter()
interface Operator {
    "adminname": string,
    "password": string,
    "role": number,
    "adminid": string,
    "checkedKeys": string[]
}
let operatorList = reactive<Operator[]>([]);
const getoperatorList = () => {
    service({
        url: "/admin/list"
    }).then((res) => {
        if (res.data.code == 200) {
            operatorList.length = 0;
            operatorList.push(...res.data.data);
        }
    })
}
getoperatorList();
const del = (adminid: string) => {
    service({
        url: "/admin/delete",
        method: "post",
        data: {
            adminid: adminid,
        }
    }).then((res) => {
        if (res.data.code == 200) {
            ElMessage({
                message: '删除成功！',
                type: 'success',
            })
            getoperatorList();
            // router.go(0);
        }
    }
    )
}
const isshow = ref(false);//修改框处于隐藏状态
const chufa = () => {
    isshow.value = false;
}
const editAdminName = ref("");
const editShowFn = (adminname: string) => {
    editAdminName.value = adminname;
    isshow.value = true;
}
const gengxinFn =()=> getoperatorList();
</script>
<style scoped>
.pic {
    width: 100px;
    height: 100px;
}
</style>
